柱状图

介绍

柱状图是用柱来展现数据大小与区别的一种方式。

有时会用来展示数据趋势，或用来进行不同数据的对比。

实例

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

或是来一个水平的。

var myBarChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: options
});

数据集结构

下面的一些选项配置可以使用到柱状图中以实现具体的数据展示要求。

其中有一些参数可以是一个具体的数组。如果存在这样的数组，那第一个元素值适用于柱图中的第一类，第二个元素值适用于柱图中的第二类，以此类推。

下面是一个使用上述属性的实例：

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1,
            data: [65, 59, 80, 81, 56, 55, 40],
        }
    ]
};

柱状图的数据结构和线图的数据结构很相似，都有一组数据集，带着颜色和数据的配置。我们也有一组为了展示用的标签。在上述实例中，我们使用的是和线图中的实例相同的数据。

图表选项

这里介绍的是一些定制化柱状图的具体选项。这些选项都已经合并到了图表全局配置选项了，包含了图表的选项。

柱状图的默认选项被设置在Chart.defaults.bar中。

你可以依据你自己的图表情况适时的传递第二个对象参数来覆盖修改你需要修改的选项。 例如，我们有一个stacked选项为false的柱状图，我们在此基础上可以像下面这样做：

new Chart(ctx, {
    type: "bar",
    data: data,
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});
// This will create a chart with all of the default options, merged from the global config,
//  and the Bar chart defaults but this particular instance will have `stacked` set to true
// for both x and y axes.

我们也可以修改每一个柱在创建时的默认值，这些值都存在于Chart.default.bar.对于水平柱状图来说，这些默认值存在于Chart.defaults.horizontalBar.

水平柱状图的x轴与y轴是交换的，初次之外还有一些额外的选项。

柱状百分比 vs 种类百分比

下面展示了柱状百分比选项与种类百分比选项之间的关系。

// categoryPercentage: 1.0
// barPercentage: 1.0
Bar:        | 1.0 | 1.0 |
Category:   |    1.0    |   
Sample:     |===========|

// categoryPercentage: 1.0
// barPercentage: 0.5
Bar:          |.5|  |.5|
Category:  |      1.0     |   
Sample:    |==============|

// categoryPercentage: 0.5
// barPercentage: 1.0
Bar:            |1.||1.|
Category:       |  .5  |   
Sample:     |==============|